<template>
	<h-dark :title="t('user.setting')"></h-dark>
	<view class="user-set">
		<navigator :url="`/pages/user_data/user_data`">
			<view class="item flex bg-white mt-[20rpx]">
				<u-avatar :src="userInfo.avatar" shape="square" :size="100"></u-avatar>
				<view class="ml-[20rpx] flex flex-1 justify-between items-center">
					<view>
						<view class="mb-[15rpx] text-xl font-medium">{{ userInfo.account }}</view>
					</view>
					<u-icon name="arrow-right" color="#666"></u-icon>
				</view>
			</view>
		</navigator>
		<view class="item bg-white mt-[20rpx] btn-border flex flex-1 justify-between" @click="show = true">
			<view class="">{{t('user.loginPwd')}}</view>
			<u-icon name="arrow-right" color="#666"></u-icon>
		</view>
		<navigator url="/pages/change_password/change_password_pay">
			<view class="item bg-white  btn-border flex flex-1 justify-between">
				<view class="">{{t('user.payPwd')}}</view>
				<u-icon name="arrow-right" color="#666"></u-icon>
			</view>
		</navigator>
		<navigator url="/pages/news_detail/detail?id=2">
			<view class="item bg-white mt-[20rpx] flex flex-1 justify-between">
				<view class="">{{t('user.aboutUs')}}</view>
				<view class="flex justify-between">
					<view class="text-muted mr-[20rpx]">
						{{ appStore.config.version }}
					</view>
					<u-icon name="arrow-right" color="#666"></u-icon>
				</view>
			</view>
		</navigator>

		<view class="mt-[60rpx] mx-[26rpx]">
			<u-button type="primary" @click="showLogout=true"> {{t('user.logout')}} </u-button>
		</view>

		<u-action-sheet class="max-w-[750px]" :list="list" v-model="show" @click="handleClick"
			:safe-area-inset-bottom="true"></u-action-sheet>
		<u-modal v-model="showLogout" :content="t('user.logoutTips')" :show-title="false" :show-cancel-button="true"
			:confirm-text="t('common.confirm')" :cancel-text="t('common.cancel')" @confirm='logoutHandle'></u-modal>
	</view>
</template>

<script setup lang="ts">
	import { onShow } from '@dcloudio/uni-app'
	import { ref } from 'vue'
	import { useAppStore } from '@/stores/app'
	import { useUserStore } from '@/stores/user'
	import { getUserInfo} from '@/api/user'
	import { t } from '@/utils/util'
	
	uni.setNavigationBarTitle({ title: t('user.setting') })
	const appStore = useAppStore()
	const userStore = useUserStore()
	const userInfo = ref<any>({})

	const list = ref([
		{
			text: t('user.chPwd')
		},
		{
			text: t('user.fgPwd')
		}
	])

	const showLogout = ref(false)
	const show = ref(false)

	// 修改/忘记密码
	const handleClick = (index : number) => {
		show.value = false
		switch (index) {
			case 0:
				uni.navigateTo({ url: '/pages/change_password/change_password' })
				break
			case 1:
				uni.navigateTo({ url: '/pages/forget_pwd/forget_pwd' })
				break
		}
	}

	// 退出登录
	const logoutHandle = () => {
		userStore.logout()
		uni.redirectTo({ url: '/pages/login/login' })
	}
	
	// 获取用户信息
	const getUser = async () : Promise<void> => {
		userInfo.value = await getUserInfo()
	}

	onShow(() => {
		getUser()
	})
</script>

<style lang="scss" scoped>
	.user-set {
		.item {
			padding: 30rpx;
		}

		.btn-border {
			border-bottom: 2rpx solid #f8f8f8;
		}
	}
</style>